<template>
<div>
  <mu-container>
    <mu-card style="width: 100%; margin: 0 auto;" v-for="item in lists" >
      <mu-card-header :title="item.server_name" :sub-title="'预算￥：'+item.fee">
        <mu-avatar slot="avatar">
          <img :src="item.server_avatar" :onerror="img_error">
        </mu-avatar>
      </mu-card-header>
      <a :href="'#/good/show?id='+item.id">
        <mu-card-text v-html="item.name">  </mu-card-text>
        <mu-card-text>
          <div class="mu-card-media"  v-if="item.image[0]">
            <img  :src="item.image[0]" alt=""  >
          </div>
        </mu-card-text>
        <mu-card-text v-html="item.desc">  </mu-card-text>
      </a>
    </mu-card>
    <p style="height:50px"></p>
  </mu-container>
  <toolbar :value="'channel'"></toolbar>
</div>

</template>

<script>
    import toolbar from "@/view/common/toolbar"
    import channel_navbar from "./navbar"


    export default {
        name: 'channel',
        data () {
            return {
                icon:{
                    zan:require("@/img/icon/zan.png"),
                    msg:require("@/img/icon/msg.png"),
                },
                lists:[],
                img_error:"this.src='"+require("@/img/logo.png")+"'",
                site_url:BASE.site_url,
                msg: 'Welcome to Your Vue.js App'
            }
        },
        mounted(){
            this.load_good();
        },
        methods:{
          show(id){
              this.$router.push({path: '/channel/show',query:{
                  id:id
              }, replace: true})
          },
            load_good(){
                let $this = this;
                let param = {};
                if(this.$route.query.server_id){
                    param["server_id"] = this.$route.query.server_id;
                }
                $this.$api.server_good(param,function(resp){
                    if(resp.code == 0){
                        $this.lists = resp.data.data;
                    }else{
                        this.$toast.error(resp,msg);
                    }
                });
            },
        },
        components:{
            toolbar
        }
    }
</script>
